<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />

		<script src="../../js/lib/code-mirror-v5.33.0/lib/codemirror.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/code-mirror-v5.33.0/mode/javascript/javascript.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/code-mirror-v5.33.0/addon/scroll/simplescrollbars.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/code-mirror-v5.33.0/addon/scroll/annotatescrollbar.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/lib/code-mirror-v5.33.0/addon/scroll/scrollpastend.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../../js/lib/code-mirror-v5.33.0/lib/codemirror.css" />
		<link rel="stylesheet" type="text/css" href="../../js/lib/code-mirror-v5.33.0/addon/scroll/simplescrollbars.css" />

		<title>Document</title>
	</head>

	<body>
		<h2>code mirror editor with simple-scroll-bar</h2>
		<div style="width: 400px;height: 300px;border: 1px solid dodgerblue;">
			<textarea id="editor">
				Each editor is associated with an instance of CodeMirror.Doc, its document. A document represents the editor content, plus a selection, an undo history, and a mode. A document can only be associated with a single editor at a time. You can create new documents by calling the CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string) constructor. The last three arguments are optional and can be used to set a mode for the document, make it start at a line number other than 0, and set a specific line separator respectively.
				Each editor is associated with an instance of CodeMirror.Doc, its document. A document represents the editor content, plus a selection, an undo history, and a mode. A document can only be associated with a single editor at a time. You can create new documents by calling the CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string) constructor. The last three arguments are optional and can be used to set a mode for the document, make it start at a line number other than 0, and set a specific line separator respectively.
				Each editor is associated with an instance of CodeMirror.Doc, its document. A document represents the editor content, plus a selection, an undo history, and a mode. A document can only be associated with a single editor at a time. You can create new documents by calling the CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string) constructor. The last three arguments are optional and can be used to set a mode for the document, make it start at a line number other than 0, and set a specific line separator respectively.
				Each editor is associated with an instance of CodeMirror.Doc, its document. A document represents the editor content, plus a selection, an undo history, and a mode. A document can only be associated with a single editor at a time. You can create new documents by calling the CodeMirror.Doc(text: string, mode: Object, firstLineNumber: ?number, lineSeparator: ?string) constructor. The last three arguments are optional and can be used to set a mode for the document, make it start at a line number other than 0, and set a specific line separator respectively.
			</textarea>
		</div>

		<script type="text/javascript">
			var editor = CodeMirror.fromTextArea(document.querySelector('#editor'), {
				lineNumbers: true,
				mode: "javascript",
				lineWrapping: true,
				scrollbarStyle: 'simple' //native null simple overlay
			});
		</script>
	</body>

</html>